<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello Vue</title>
</head>
<body>
<div id="app">
    <!-- 每个属性都会有set、get方法，只是我们平时都是直接使用它的get -->
    <h1>{{name3}}</h1>
</div>
</body>
<script src="../css/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            name1: "hello",
            name2: "Vue"
        },
        computed:{
            name3: {
                get: function () {
                    console.log("get值")
                    return this.name1 + ' ' + this.name2
                },
                /*控制台直接修改 app.name3 = 'a b'，name1改成a, name2改成b */
                set: function (value) {
                    console.log("set值")
                    let names = value.split(' ');
                    this.name1 = names[0];
                    this.name2 = names[1];
                }
            }
        }
    });
</script>
</html>
